<template>
  <div class="app-container">
    <div class="header">
      <div>考勤数据数据分析</div>
      <div>
        <el-button type="success" class="btn" @click="onClick">最近三十天</el-button>
        <el-date-picker v-model="dateRange" type="daterange" range-separator="~" start-placeholder="开始日期"
          end-placeholder="结束日期" value-format="yyyy-MM-dd" @change=changeDate() />
      </div>
    </div>
    <pie-chart :piedata="list" />
    <el-table ref="tables" :data="[list]">
      <el-table-column label="正常人次" align="center" prop="normal" />
      <el-table-column label="迟到人次" align="center" prop="late" />
      <el-table-column label="旷工人次" align="center" prop="absenteeism" />
      <el-table-column label="请假人次" align="center" prop="leave" />
      <el-table-column label="异常人次" align="center" prop="abnormal" />
      <el-table-column label="休息人次" align="center" prop="rest" />
    </el-table>
  </div>
</template>

<script>
import PieChart from '../components/PieChart.vue';
import { detail } from "@/api/personnel/attendance";
export default {
  name: 'DashboardAdmin',
  components: {
    PieChart,
  },
  data() {
    return {
      dateRange: [],
      list: {
        absenteeism: 0,
        leave: 0,
        rest: 0,
        late: 0,
        normal: 1,
        abnormal: 0
      },
      userId: this.$route.query.userId
    }
  },
  created() {
    this.onClick();
    this.getDetail();
  },
  methods: {
    getDetail() {
      const params = { userId: this.userId, startTime: '', endTime: '' }
      if (this.dateRange && this.dateRange.length > 0) {
        params.startTime = this.moment(this.dateRange[0]).format("YYYY-MM-DD");
        params.endTime = this.moment(this.dateRange[1]).format("YYYY-MM-DD");
      }
      else {
        this.$modal.msgError("请选择日期");
        return
      }
      detail(params).then(response => {
        this.list = response.data;
        this.list.userName = this.$route.query.userName
      }
      );
    },
    onClick() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      this.dateRange = [start, end];
      this.getDetail();
    },
    changeDate() {
      this.getDetail();
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  margin-bottom: 35px;
  display: flex;
  justify-content: space-between;

  .btn {
    margin-right: 12px;
  }
}
</style>
